<template>
  <view class="health-data-container">
    <!-- 标题栏 -->
    <view class="header">
      <text class="title">常规项目</text>
      <view class="expand-btn" @tap="toggleExpanded">
        <text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
        <text class="expand-icon">{{ isExpanded ? '∧' : '∨' }}</text>
      </view>
    </view>

    <!-- 健康数据列表 -->
    <view class="health-list" v-if="isExpanded">
      <view 
        class="health-item" 
        v-for="(item, index) in healthData" 
        :key="index"
      >
        <!-- 左侧图标 -->
        <view class="icon-container" :style="{ backgroundColor: item.iconColor }">
          <text class="icon">{{ item.icon }}</text>
        </view>

        <!-- 中间内容 -->
        <view class="content">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-value">{{ item.value }}</text>
        </view>

        <!-- 右侧状态标签 -->
        <view 
          class="status-tag" 
          :style="{ 
            backgroundColor: item.status.bgColor,
            color: item.status.textColor 
          }"
        >
          <text>{{ item.status.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 展开/收起状态
const isExpanded = ref(true);

// 健康数据
const healthData = ref([
  {
    icon: '🩸',
    iconColor: '#4CAF50',
    title: '血糖',
    value: '血糖数值：9.4(空腹)',
    status: {
      text: '轻度',
      bgColor: '#FFB74D',
      textColor: '#FFFFFF'
    }
  },
  {
    icon: '🫁',
    iconColor: '#4CAF50',
    title: '血氧',
    value: '血氧饱和度：99%',
    status: {
      text: '正常',
      bgColor: '#66BB6A',
      textColor: '#FFFFFF'
    }
  },
  {
    icon: '💓',
    iconColor: '#4CAF50',
    title: '血压·心率',
    value: '血压：120/81    心率：99',
    status: {
      text: '轻度',
      bgColor: '#FFB74D',
      textColor: '#FFFFFF'
    }
  },
  {
    icon: '🌡️',
    iconColor: '#4CAF50',
    title: '体温',
    value: '体温度数：36.0°C',
    status: {
      text: '正常',
      bgColor: '#66BB6A',
      textColor: '#FFFFFF'
    }
  },
  {
    icon: '📊',
    iconColor: '#4CAF50',
    title: '心电图',
    value: '心电数值：',
    status: {
      text: '正常',
      bgColor: '#66BB6A',
      textColor: '#FFFFFF'
    }
  },
  {
    icon: '🏃',
    iconColor: '#4CAF50',
    title: '运动',
    value: '运动分数：20',
    status: {
      text: '正常',
      bgColor: '#66BB6A',
      textColor: '#FFFFFF'
    }
  }
]);

// 切换展开/收起状态
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style lang="scss" scoped>
.health-data-container {
  background: #FFFFFF;
  border-radius: 8px;
  margin: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  
  .expand-btn {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    
    .expand-text {
      font-size: 14px;
      color: #999999;
      margin-right: 4px;
    }
    
    .expand-icon {
      font-size: 12px;
      color: #999999;
    }
  }
}

.health-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.health-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
  
  &:last-child {
    border-bottom: none;
  }
}

.icon-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  
  .icon {
    font-size: 20px;
  }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  
  .item-title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  
  .item-value {
    font-size: 14px;
    color: #666666;
  }
}

.status-tag {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  min-width: 40px;
  text-align: center;
}
</style> 